<template>
  <div>
    <div class="header">
      <!-- Navigator Mini Bar -->
      <wxc-minibar :title="language.title"
                    background-color="#fcfcfc">
        <div slot="left">
          <i class="iconfont icon-back"></i>
        </div>
      </wxc-minibar>
    </div>
    <div class="content">
      <list class="list-box">
        <cell v-for="(v,index) in orderList" :key="index" class="item-box">
          <cell class="top">
            <div class="slot-left">
              <i class="iconfont icon-table"></i>
              <text>{{v.merchant_name}}</text>
            </div>
            <div class="slot-right">
              <text class="date">{{v.updatetime | formatDate }}</text>
            </div>
          </cell>
          <cell v-for="(food,foodKey) in v.foods" :key="foodKey" class="middle">
            <div class="item">
              <div class="name">
                <text>{{food.food_name}}</text>
              </div>
              <text class="number">{{food.num}}</text>
              <text class="price">{{food.price}}</text>
            </div>
            <text class="attributes">{{food.attributes}}</text>
          </cell>
          <cell class="bottom">
            <text class="amount-label">{{language.total}}</text>
            <text class="price">{{v.total}}</text>
          </cell>
        </cell>
      </list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .header{
    position: fixed;
    top:0px;
    z-index:99999;
  }
  .content {
    padding: 30px;
    margin-top: 40px;
    .list-box {
      .item-box {
        background-color: #ffffff;
        box-shadow: 1px 1px 0.06667rem rgba(204,204,204,0.5);
        border-radius: 0.26667rem;
        margin-top: 30px;

        .top {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px dashed #dfdfdf;

          .slot-left {
            flex-direction: row;
            align-items: center;

            .icon-table {
              margin-right: 20px;
              font-size: 120%;
            }
          }

          .slot-right {
            flex-direction: row;

            .date {
              color: #979797;
            }
          }
        }

        .middle {
          padding: 20px;

          .item {
            flex-direction: row;
            justify-content: space-around;
            align-items: flex-end;

            .name {
              flex-grow: 1;

              > p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
                width: 300px;
              }
            }

            .number {
              flex-direction: row;
              flex-grow: 1;

              &:before {
                content: "x"
              }
            }

            .price {
              flex-direction: row;

              &:before {
                content: "mop";
                padding-right: 5px;
              }
            }
          }

          .attributes {
            margin-top: 20px;
            color: #979797;
          }
        }

        .bottom {
          padding: 20px;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;

          .amount-label {
            color: #979797;
          }

          .price {
            font-size: 46px;
            color: #f45551;

            &::before {
              content: "mop";
              font-size: 30px;
              padding-right: 5px;
            }
          }
        }
      }
    }
  }
</style>

<script>
import Vue from 'vue'
import { i18n } from '@/renderer/modules/lang'
import { getOrderList } from '@/api/order'
import { WxcMinibar } from 'weex-ui'
import { formatDate } from '@/components/common/js/formatDate'
export default {
  components: { WxcMinibar },
  filters: {
    formatDate (time) {
      let date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  data: () => ({
    orderList: [],
    language: {
      title: i18n.t('historyOrder.title'),
      total: i18n.t('historyOrder.total')
    },
    tabPageHeight:''
  }),
  created () {
    this.getOrderList()
  },
  methods: {
    getOrderList () {
      getOrderList({
        system_type: localStorage.getItem('system_type'),
        timestamp: localStorage.getItem('timestamp'),
        key: localStorage.getItem('key'),
        token: localStorage.getItem('token'),
        lang_id:localStorage.getItem('language') ? localStorage.getItem('language') : 1
      }).then(res => {
        let OrderList = res.data.list
        for (let key in OrderList) {
          for (let foodKey in OrderList[key].foods) {
            let attributes = []
            for (let attributeKey in OrderList[key].foods[foodKey].attrs) {
              for (let modelKey in OrderList[key].foods[foodKey].attrs[attributeKey].models) {
                attributes.push(OrderList[key].foods[foodKey].attrs[attributeKey].models[modelKey].model_name)
              }
            }
            OrderList[key].foods[foodKey].attributes = attributes.join('、')
          }
        }
        this.orderList = res.data.list
      }).catch(err => {
        console.log(err.message)
      }).finally(() => {})
    }
  }
}
</script>
